<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="姓名">
              <a-input v-model="form.name" placeholder="请输入姓名"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="状态">
              <a-select v-model="form.status" placeholder="请选择" default-value="0">
                <a-select-option value="00">正常</a-select-option>
                <a-select-option value="01">禁用</a-select-option>
                <a-select-option value="02">锁定</a-select-option>
                <a-select-option value="03">删除</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span
              class="table-page-search-submitButtons">
              <a-button type="primary" @click="handleSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div style="width: 100%;text-align: right;margin-bottom: 10px">
      <a-button type="primary" @click="addUserShow = !addUserShow">新增</a-button>
    </div>

    <a-table
      :columns="columns"
      :data-source="tableData"
    >
      <template slot="sexy" slot-scope="text">
        <span v-if="text == '1'">男</span>
        <span v-if="text == '2'">女</span>
        <span v-if="text == '3'">未知</span>
      </template>

      <template slot="status" slot-scope="text">
        <span v-if="text == '00'">正常</span>
        <span v-if="text == '01'">禁用</span>
        <span v-if="text == '02'">锁定</span>
        <span v-if="text == '03'">删除</span>
      </template>

      <template slot="role" slot-scope="text">
        <span v-if="text == '01'">老师</span>
        <span v-if="text == '02'">学生</span>
      </template>

      <template slot="action" slot-scope="text,record,index">
        <a-dropdown>
          <a class="ant-dropdown-link" @click="e => e.preventDefault()"> 操作</a>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <a @click="changeRole(record,index)">切换角色</a>
              </a-menu-item>
              <a-menu-item>
                <a @click="changeStatus(record,index,'00')">正常</a>
              </a-menu-item>
              <a-menu-item>
                <a @click="changeStatus(record,index,'01')">禁用</a>
              </a-menu-item>
              <a-menu-item>
                <a @click="changeStatus(record,index,'02')">锁定</a>
              </a-menu-item>
              <a-menu-item>
                <a @click="changeStatus(record,index,'03')">删除</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </template>
    </a-table>

    <a-modal v-model="addUserShow" title="新增用户" :footer="null">
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="姓名">
          <a-input v-model="addForm.name" placeholder="请输入姓名"/>
        </a-form-item>

        <a-form-item label="登录名">
          <a-input v-model="addForm.loginName" placeholder="请输入登录名"/>
        </a-form-item>

        <a-form-item label="密码">
          <a-input v-model="addForm.password" type="password" placeholder="密码"/>
        </a-form-item>

        <a-form-item label="性别">
          <a-select v-model="addForm.sexy" placeholder="请选择性别">
            <a-select-option value="1">男</a-select-option>
            <a-select-option value="2">女</a-select-option>
            <a-select-option value="3">未知</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="角色">
          <a-select v-model="addForm.role" placeholder="请选择角色">
            <a-select-option value="01">老师</a-select-option>
            <a-select-option value="02">学生</a-select-option>
          </a-select>
        </a-form-item>
        <div style="width: 100%;text-align: center">
          <a-button type="primary" @click="handleAddUser">确定</a-button>
          <a-button @click="addUserShow = !addUserShow" style="margin-left: 10px">取消</a-button>
        </div>
      </a-form>
    </a-modal>

  </a-card>
</template>

<script>
  import md5 from 'md5'
  import { queryUser, updUser, addUser } from '@/api/user'

  const columns = [
    {
      title: '姓名',
      key: 'name',
      dataIndex: 'name'
    },
    {
      title: '登录名',
      key: 'loginName',
      dataIndex: 'loginName'
    },
    {
      title: '性别',
      dataIndex: 'sexy',
      scopedSlots: { customRender: 'sexy' }
    },
    {
      title: '状态',
      dataIndex: 'status',
      scopedSlots: { customRender: 'status' }
    },
    {
      title: '角色',
      dataIndex: 'role',
      scopedSlots: { customRender: 'role' }
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: { customRender: 'action' }
    }
  ]
  export default {
    name: 'UserManage',
    data () {
      return {
        form: { name: '', status: '' },
        columns: columns,
        tableData: [],
        total: 0,
        addUserShow: false,
        addForm: {
          name: '',
          loginName: '',
          sexy: '',
          role: '',
          password: ''
        }
      }
    },
    methods: {
      handleSearch () {
        queryUser(this.form).then(rsp => {
          this.total = rsp['total']
          this.tableData = rsp['data']
        })
      },
      changeRole (user, index) {
        updUser({ id: user.id, role: user.role === '01' ? '02' : '01' }).then(rsp => {
          this.tableData.splice(index, 1, rsp)
        })
      },
      changeStatus (user, index, status) {
        updUser({ id: user.id, status: status }).then(rsp => {
          this.tableData.splice(index, 1, rsp)
        })
      },
      handleAddUser () {
        this.addUserShow = false
        this.addForm.password = md5(this.addForm.password)

        addUser(this.addForm).then(rsp => {
          this.tableData.splice(0, 0, rsp)
          this.addForm = {}
        })
      }
    },
    mounted () {
      this.handleSearch()
    }
  }
</script>

<style scoped>

</style>
